<template>
  <div>
    <r-h-modal-form v-bind:="formModal" />
    <r-h-table v-bind="table" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import RHTable from '@/components/RHTable/index.vue'
import RHModalForm from '@/components/RHForm/RHModalForm/index.vue'
import * as request from '@/axios/axios'
export default defineComponent({
  name: 'Index',
  components: { RHModalForm, RHTable },
  setup() {
    const table = ref({
      columns: [],
      url: '/api/base/rhTable/getList',
      header: {
        buttons: [
          { title: '新建', type: 'primary', icon: { name: 'plus-outlined' }, click: () => {
            formModal.value.modal.visible = true
          } }
        ]
      },
      footer: false
    })
    const formModal = ref({
      form: {
        formItem: [
          {
            title: '主键id',
            dataIndex: 'id',
            type: 'Input'
          },
          {
            title: '排序',
            dataIndex: 'sort',
            type: 'Input',
            showType: ['Create']
          },
          {
            title: '标题',
            dataIndex: 'title',
            type: 'Input',
            showType: ['Create']
          },
          {
            title: '表名称',
            dataIndex: 'name',
            type: 'Input',
            showType: ['Create'],
            rules: [{ required: true, message: 'Please input your username!' }]
          },
          {
            title: '状态',
            dataIndex: 'status',
            type: 'Input'
          }
        ]
      },
      modal: {
        visible: false,
        title: '',
        titleForm: 'title',
        ok: function() {

        }
      }
    })
    request.post('/api/base/rhTable/getByTableName', { name: 'rh_table' })
      .then((x:any) => {
        const entity = x.data
        table.value.columns = entity.fields
      })
    return {
      table, formModal
    }
  }
})
</script>

<style scoped>

</style>
